import Vue from 'vue'
import App from './App.vue'
import "./styles/base.css"
import "./styles/index.css"
import "bootstrap/dist/css/bootstrap.css"
import axios from 'axios'
import "./assets/fonts/iconfont.css"
import UlRouter from "@/views/Ul_Router.vue"
import Contacts from "@/views/Contacts.vue"
import About from "@/views/About.vue"
import AllContacts from "@/views/Second/All_contacts.vue"
import Alice from "@/views/Second/Alice.vue"
import Bob from "@/views/Second/Bob.vue"
import VueRouter from "vue-router"
import Blog from "@/views/Second/third/Blog.vue"
import Fax from "@/views/Second/third/Fax.vue"


Vue.use(VueRouter)
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})
const routes = [
  {
    path: '/ul_router',
    component: UlRouter
  },
  {
    path: '/contacts',
    component: Contacts,
    children: [
      {
        path: '/all_contacts',
        component: AllContacts
      },
      {
        path: '/alice',
        component: Alice
      },
      {
        path: '/bob',
        component: Bob,
        children: [
          {
            path: '/blog',
            component: Blog
          },
          {
            path: '/fax',
            component: Fax
          }
        ]
      }
    ]
  },
  {
    path: '/about',
    component: About
  }
];

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
